<template>
  <div class="app-container">
       <div class="filter-container">
         <!-- <el-input v-model="SearchForm.RoleName" style="width:200px" placeholder="角色名称" class="filter-item"></el-input>
         <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button> -->
         <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleAdd('')">添加</el-button>
      </div>
         <tree-table :data="dataTree"  :columns="columns"   :expand-all="false" border :IsChecked="false">
            <el-table-column label="操作" width="350" >
                <template slot-scope="scope">
                  <el-button type="warning" size="mini" @click="handleAdd(scope.row.MCode)">添加下级菜单</el-button>
                  <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                  <el-button  size="mini" type="success" @click="handleModifyStatus(scope.row)">{{scope.row.MStatus==1?'禁用':'启用'}} 
                  </el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row)"> 删除</el-button>
                </template>
           </el-table-column>
         </tree-table>
        <!-- 新增编辑弹出框 -->
           <el-dialog
              :title="form.ID==0?'新增菜单':'编辑菜单'"
              :visible.sync="AddOrEditdialogVisible"
              width="30%"
              @close="handleClose"
             >
              <div>
                <el-form ref="form" :model="form" :rules="rule" label-width="80px">
                  <el-form-item label="菜单名称" prop="MName">
                    <el-input v-model="form.MName"></el-input>
                  </el-form-item>
                  <el-form-item label="菜单地址" prop="MUrl">
                    <el-input v-model="form.MUrl"></el-input>
                  </el-form-item>
                  <el-form-item label="菜单图标" prop="MIcon">
                    <el-input v-model="form.MIcon"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="AddOrEditdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
              </span>
          </el-dialog>
  </div>
</template>
<script>
import req from '@/utils/req'
import treeTable from '@/components/TreeTable'
import treeToArray from './customEval'

export default {
  components: { treeTable },
  data() {
    return {
       SearchForm:{
          MName:'',
          pageIndex:1,
          pageSize:10,
        },
        form:{
          ID:0,
          MName:''
        },
       dataTree:[],
       columns: [
        {
          text: '菜单名称',
          value: 'MName',
          width: 200
        },
        {
          text: '菜单编码',
          value: 'MCode',
           width: 150
        },
        {
          text: '菜单地址',
          value: 'MUrl'
        },
         {
          text: '菜单图标',
          value: 'MIcon'
        },
        {
          text: '菜单状态',
          value: 'StautsStr'
        },
      ],
      form:{
        ID:0,
        MName:'',
        MStatus:1,
        ParentCode:'',
        MIcon:'',
        MUrl:"",
      },
      AddOrEditdialogVisible:false,
          //验证
        rule:{
          MName:[
             { required: true, message: '请输入菜单名称', trigger: 'blur' },
          ],
        },
    }
  },
  methods:{
    getList(){
      req.get('sys/Module/GetMoudle',{}).then(res=>{
        this.dataTree=res.Data;
     });
    },
    handleFilter(){},
    handleAdd(code){
      this.form.ParentCode=code;
      this.AddOrEditdialogVisible=true;
    },
    handleClose(){
      this.form.MName="";
      this.form.MIcon="";
      this.form.MUrl="";
      this.form.ID=0
    },
    handleUpdate(row){
     this.form=Object.assign({}, row) // copy obj;
          this.form.Childrens=[]
     this.AddOrEditdialogVisible=true;
    },
    handleSubmit(){
           var url=this.form.ID==0?'sys/Module/Add':'sys/Module/Edit';
          let data={
            ID:this.form.ID,
            MName:this.form.MName,
            MStatus:this.form.MStatus,
            MUrl:this.form.MUrl,
            MIcon:this.form.MIcon,
            ParentCode:this.form.ParentCode
          }
            this.$refs['form'].validate((valid) => {
              if(valid){
                req.post(url,data).then(res=>{
                      if(res.StatusCode===200){
                          this.$notify.success({ title: '成功',message:'操作成功' });
                          this.AddOrEditdialogVisible=false;
                          this.getList();
                      }
                    });
              }
          })
    },
    handleDelete(row){
          this.$confirm(`此操作将永久删除该菜单，及下级菜单 , 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
                req.post('sys/Module/Delete',{MCode:row.MCode,ID:row.ID}).then(res=>{
                  if(res.StatusCode===200){
                      this.$notify.success({ title: '成功',message:  '删除成功'});
                      this.getList();
                  }
                });
        }).catch(() => {
        });
    },
     //禁用启用
      handleModifyStatus(row){
        let str=row.MStatus==1?'禁用':'启用'
        this.$confirm(`此操作将${str}该菜单 , 是否继续?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
                  row.MStatus=row.MStatus==1?2:1
                  req.post('sys/Module/Edit',{
                    ID:row.ID,
                    MName:row.MName,
                    MStatus:row.MStatus,
                    MUrl:row.MUrl,
                    MIcon:row.MIcon
                  }).then(res=>{
                    if(res.StatusCode===200){
                        this.$notify.success({ title: '成功',message:  str+'成功'});
                        this.getList();
                    }
                  });

          }).catch(() => {
          });
      },
  },
  created() {
    // req.get('sys/Module/GetMoudle',{}).then(res=>{
    //     this.dataTree=res.Data;
    //  });
    this.getList()
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan)
  },
}
</script>

<style rel="stylesheet/scss" lang="scss">
 
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
